<template lang="pug">
.page-list.app-container
  .container-operation
    el-button(type='primary' size="small" icon='el-icon-upload2' @click="importShow = true").el-button-left 导入
    el-button(type="primary" size="small" icon='el-icon-plus' @click="addShow = true") 添加

  .table-main
    el-table(:data="state.listData" v-loading="tableLoading" border)
      el-table-column(label="序号" prop="id" align="center" width="70")
      el-table-column(label="落地页名称" prop="name" align="center" min-width="120")
      el-table-column(label="落地页介绍" prop="dec" align="center" min-width="120")
      el-table-column(label="价格" prop="price" align="center" min-width="90")
      el-table-column(label="操作" width="220")
        template(#default="scope")
          el-button(size="mini" type="primary" @click="handleEdit(scope.row)") 编辑
          el-button(size="mini" type="danger" @click="handleDel(scope.row)" v-if="scope.row.id !== 1") 删除

  .pagination-wrap
    .page-text 本页显示：1-20&nbsp;&nbsp;&nbsp;&nbsp;总记录数：60
    .pagination
      el-pagination(background layout="prev, pager, next, jumper" :total="total" :current-page="Number(state.pageData.page)" :page-size="state.pageData.limit" @current-change="handleCurrentChange")

  pageListAdd(v-model:isDialog="addShow" @closeFun="handleColse")
  pageListEdit(v-model:isDialog="editShow" v-model:dialogRecord="state.defaultData" @closeFun="handleColse")
  pageListImport(v-model:isDialog.sync="importShow" @closeFun="handleColse")
</template>

<script setup>
import pageListAdd from './pageListAdd.vue'
import pageListEdit from './pageListEdit.vue'
import pageListImport from './pageListImport.vue'

import { getPage } from '../../api/page'

import { ref, reactive, toRefs, getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance() // 内部组件实例

// 数据
const state = reactive({
  pageData: {
    page: 1,
    limit: 20
  },
  listData: [], // 列表数据
  defaultData: {}
})
const total = ref(60)
const tableLoading = ref(false)
const addShow = ref(false)
const editShow = ref(false)
const importShow = ref(false)

queryFun()

/** 搜索逻辑开始 */
function queryFun () {
  const query = proxy.$route.query
  for (const key in query) state.pageData[key] = query[key]

  getList()
}
function handleCurrentChange (val) { searchRouter(val) }
function searchFun () { searchRouter(1) }
function searchRouter (val) {
  const query = Object.assign({}, state.pageData)
  for (const key in query) {
    if (!query[key] || key === 'limit') delete query[key]
  }
  query.page = val
  proxy.$router.push({ name: proxy.$route.name, query: query })
}
/** 搜索逻辑结束 */

// 获取列表
async function getList () {
  // tableLoading.value = true
  // const getData = await getPage(state.pageData)

  state.listData = [
    { id: 1, name: '落地页名称1', dec: '落地页简介', price: 10 },
    { id: 2, name: '落地页名称2', dec: '落地页简介', price: 10 },
    { id: 3, name: '落地页名称3', dec: '落地页简介', price: 10 },
    { id: 4, name: '落地页名称4', dec: '落地页简介', price: 10 },
    { id: 5, name: '落地页名称5', dec: '落地页简介', price: 10 }
  ]
}

// 编辑
function handleEdit (row) {
  state.defaultData = row
  editShow.value = true
}

// 删除列表
function handleDel (row) {
  proxy.$confirm('确定删除？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    proxy.$message({ type: 'success', message: '删除成功' })
  }).catch(() => {
    proxy.$message({ type: 'warning', message: '已取消删除' })
  })
}

// 关闭弹窗
function handleColse (val) {
  console.log('close')
}
</script>

<style lang="scss">
</style>
